<template>

  <lay-container fluid="true" class="fly-container">
    <lay-card v-auth="['admin:user:info:query']" class="fly-search-card">
      <lay-form size="sm">
        <lay-form-item label="昵称" prop="nickName" mode="inline">
          <lay-input v-model="queryUserInfoParams.nickName"></lay-input>
        </lay-form-item>
        <lay-form-item label="电话号码" prop="telephone" mode="inline">
          <lay-input v-model="queryUserInfoParams.telephone"></lay-input>
        </lay-form-item>
        <lay-form-item label="性别" prop="sex" mode="inline">
          <lay-select v-model="queryUserInfoParams.sex">
            <lay-select-option value="" label="全部"></lay-select-option>
            <lay-select-option value="1" label="男"></lay-select-option>
            <lay-select-option value="2" label="女"></lay-select-option>
            <lay-select-option value="3" label="未知"></lay-select-option>
          </lay-select>
        </lay-form-item>

        <!--        <lay-form-item label="有效标志" prop="validFlag" mode="inline">-->
        <!--          <lay-select v-model="queryUserInfoParams.validFlag">-->
        <!--            <lay-select-option value="" label="全部"></lay-select-option>-->
        <!--            <lay-select-option value="Y" label="有效"></lay-select-option>-->
        <!--            <lay-select-option value="N" label="无效"></lay-select-option>-->
        <!--          </lay-select>-->
        <!--        </lay-form-item>-->
        <lay-form-item mode="inline">
          <lay-button class="fly-button fly-button-search" size="sm"
                      @click=" reloadUserInfoDate(1, flyLayPage.limit) ">
            <lay-icon class="layui-icon-search"></lay-icon>
            查询
          </lay-button>
        </lay-form-item>
      </lay-form>

    </lay-card>


    <!-- table   :default-toolbar="true"  :height="'100%'" line row nob -->
    <div class="fly-table-box">
      <lay-table :page="false"
                 :columns=" userInfoColumns "
                 :loading=" tableUserInfoData.loading "
                 :data-source=" tableUserInfoData.rows "
                 @change=" reloadUserInfoDate ">

        <template v-slot:toolbar>
          <lay-button v-auth="['admin:user:info:save']" size="sm" type="primary" class="fly-button fly-toolbar-addition" @click=" onTapUserInfoAdd ">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增
          </lay-button>
        </template>

        <template v-slot:operator="{ row }">
          <lay-button v-auth="['admin:user:info:view']" size="sm" type="primary" class="fly-button fly-view-button" @click=" onTapUserInfoView(row) ">
            <lay-icon class="layui-icon-list"></lay-icon>
            查看
          </lay-button>
          <lay-button v-auth="['admin:user:info:role']" size="sm" type="primary" class="fly-button fly-edit-button" @click=" onTapUserRoleInfo(row) ">
            <lay-icon class="layui-icon-form"></lay-icon>
            身份信息
          </lay-button>
          <lay-button v-auth="['admin:user:info:update']" size="sm" type="primary" class="fly-button fly-edit-button" @click=" onTapUserInfoEdit(row) ">
            <lay-icon class="layui-icon-edit"></lay-icon>
            编辑
          </lay-button>

          <lay-button v-auth="['admin:user:info:delete']" size="sm" type="danger" class="fly-button fly-remove-button"
                      @click=" removeUserInfoHandler(row.id) ">
            <lay-icon class="layui-icon-delete"></lay-icon>
            删除
          </lay-button>

        </template>
      </lay-table>


      <lay-page v-model="flyLayPage.page"
                v-model:limit="flyLayPage.limit"
                :layout="flyLayPage.layout"
                :pages="flyLayPage.pages"
                :limits="flyLayPage.limits"
                theme="blue"
                :total=" tableUserInfoData.total"
                @change="previousNextPage" style="margin-top: 15px"></lay-page>

    </div>
  </lay-container>


  <RefUserInfo ref="refUserInfoComponent"/>
  <RefRoleInfo ref="refRoleInfoComponent"/>
</template>


<script setup lang="ts" name="userInfoComponent">
import {ref, reactive, onMounted} from 'vue';
import RefUserInfo from './RefUserInfo.vue';
import RefRoleInfo from './RefRoleInfo.vue';

import useUserInfoComposable from '@/composables/admin/UserInfoComposable';
import {UserInfo} from "@/api/admin/model/UserInfoModel";

const {
  refUserInfoComponent,
  userInfo,
  flyLayPage,
  tableUserInfoData,
  userInfoColumns,
  queryUserInfoParams,

  /* 加载表格 */
  reloadUserInfoDate,
  loadTableUserInfoData,

  /* 新增, 编辑, 查看按钮 */
  onTapUserInfoAdd,
  onTapUserInfoEdit,
  onTapUserInfoView,

  /* 接口 */
  removeUserInfoHandler
} = useUserInfoComposable();


/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  queryUserInfoParams.page = current;
  queryUserInfoParams.limit = limit;
  loadTableUserInfoData(queryUserInfoParams);
}


/**
 * 页面初始化, 加载数据
 */
onMounted(() => {
  reloadUserInfoDate(1, flyLayPage.limit);
})

const refRoleInfoComponent = ref();
const onTapUserRoleInfo = (row: UserInfo) => {
  refRoleInfoComponent.value?.open(row.id, row.nickName);
}


</script>


<style scoped>

</style>